<template>
  <div>
    <el-form :model="queryForm" inline>
      <el-form-item label="模块名称">
        <el-input v-model="queryForm.moduleName" placeholder="请输入模块名称"></el-input>
      </el-form-item>
      <el-form-item label="模块等级">
        <el-input v-model="queryForm.grade" placeholder="请输入模块等级"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格  -->
    <el-table :data="tableData" style="width: 100%;height:520px"
    :cell-style="{'text-align':'center'}"
    :header-cell-style="{'text-align':'center'}">
      <el-table-column label="序号">
        <template #default="scope">
          {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="moduleName" label="模块名称"></el-table-column>
      <el-table-column prop="moduleStyle" label="模块样式"></el-table-column>
      <el-table-column prop="url" label="模块地址"></el-table-column>
      <el-table-column prop="parentId" label="父模块编号" width="95"></el-table-column>
      <el-table-column prop="parentOptValue" label="父模块权限" width="95"></el-table-column>
      <el-table-column prop="grade" label="模块等级"></el-table-column>
      <el-table-column prop="optValue" label="模块权限值" width="95"></el-table-column>
      <el-table-column prop="orders" label="排序"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="修改时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="info" size="small" @click="handleEdit(scope.row)">
            <el-icon>
              <Edit/>
            </el-icon>
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 模态框 -->
    <el-row>
      <template v-if="modelForm.dialogFormVisible">
        <el-dialog :title="modelForm.title" v-model="modelForm.dialogFormVisible" width="30%">
          <el-form :model="modelData" :rules="rules" label-position="left" label-width="auto">
            <el-form-item label="模块名称:">
              <el-input v-model="modelData.moduleName" placeholder=请输入模块名称></el-input>
            </el-form-item>
            <el-form-item label="模块样式:">
              <el-input v-model.number="modelData.moduleStyle" placeholder="请输入模块样式"></el-input>
            </el-form-item>
            <el-form-item label="模块地址:">
              <el-input v-model.number="modelData.url" placeholder="请输入模块地址"></el-input>
            </el-form-item>
            <el-form-item label="父模块编号:">
              <el-input v-model.number="modelData.parentId" placeholder="请输入父模块编号"></el-input>
            </el-form-item>
            <el-form-item label="父模块权限:">
              <el-input v-model.number="modelData.parentOptValue" placeholder="请输入父模块权限"></el-input>
            </el-form-item>
            <el-form-item label="模块等级:">
              <el-input v-model="modelData.grade" placeholder="请输入模块等级"></el-input>
            </el-form-item>
            <el-form-item label="模块权限:">
              <el-input v-model="modelData.optValue" placeholder="请输入模块权限"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
              <el-input v-model="modelData.order" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="创建时间:">
              <el-input v-model="modelData.createDate" placeholder="请输入创建时间"></el-input>
            </el-form-item>
            <el-form-item label="修改时间:">
              <el-input v-model="modelData.updateDate" placeholder="请输入修改时间"></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <slot name="footer">
              <el-button @click="closeModel()">取 消</el-button>
              <el-button @click="reset()">重 置</el-button>
              <el-button type="primary" @click="submit()">提 交</el-button>
            </slot>
          </div>
        </el-dialog>
      </template>    
    </el-row>
  </div>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
import {Edit, Delete} from '@element-plus/icons-vue';
import axios from "axios";

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

// 模态框信息
const modelForm = reactive({
  input: '',
  title: '',
  dialogFormVisible: false,
  data: {},
})

// 模态框数据
const modelData = reactive({
  id: '',
  moduleName: '',
  moduleStyle: '',
  url: '',
  parentId: '',
  parentOptValue: '',
  grade: '',
  optValue: '',
  order: '',
  createDate: '',
  updateDate: '',
});

// 查询表单数据
const queryForm = reactive({
  moduleName: '',
  grade: '',
});

// 表格数据
const tableData = ref([]);

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 模拟获取数据的函数
const fetchData = async (queryForm) => {

  console.log("查询,参数为：{}",queryForm);
  const params = {
    moduleName: queryForm.moduleName,
    grade: queryForm.grade,
    page: pagination.currentPage,
    pageSize: pagination.pageSize,
  };
  const result = await axios.get("/api/module/page",{params});
  console.log(result.data);
  if (result.data.code) {
    tableData.value = result.data.data.records;
    pagination.total = result.data.data.total;
  }
};

// 查询
const handleSearch = () => {
  fetchData(queryForm);
};

// 分页大小改变
const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  fetchData(queryForm);
};

// 当前页改变
const handleCurrentChange = (newPage) => {
  pagination.currentPage = newPage;
  console.log("当前页改变:{}", pagination.currentPage);
  fetchData(queryForm);
};

// 添加
const handleAdd = () => {
  // 实现添加逻辑
  console.log('添加');

  reset();
  modelForm.dialogFormVisible = true;
  modelForm.title = '新增数据';
};

// 编辑
const handleEdit = (row) => {
  // 实现编辑逻辑
  console.log('编辑', row);

  reset();
  modelData.moduleName = row.moduleName;
  modelData.moduleStyle = row.moduleStyle;
  modelData.url = row.url;
  modelData.parentId = row.parentId;
  modelData.parentOptValue = row.parentOptValue;
  modelData.grade = row.grade;
  modelData.optValue = row.optValue;
  modelData.order =row.order;
  modelData.id = row.id;
  modelData.createDate = row.createDate;
  modelData.updateDate = row.updateDate;
  
  modelForm.dialogFormVisible = true;
  modelForm.title = '修改数据';
};

// 删除
const handleDelete = (row) => {
  // 实现删除逻辑
  console.log('删除', row);

  this.$confirm('确认删除？','系统提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    cancelButtonClass:'btn-custom-cancel',
    type:'warning'
  }).then(function(){
    axios.delete('/api/module/'+ row.id).then(res=>{
      if(res.data.code === '1'){
        msg("success","删除成功");
        onMounted();
      }else{
        msg("error", res.data.message);
      }
    })
  })
};

// 提交编辑信息
const submit = () => {
  modelForm.dialogFormVisible = false;

  // 提交添加结果
  if (!modelData.id) {
    axios.post('/api/module/', modelData).then(res => {
      if(res.data.code === '1'){
        msg("success","添加成功");
      }else{
        msg("error", res.data.message);
      }
      modelForm.dialogFormVisible = false;
      onMounted();
    })
  } 
  // 提交修改结果
  else {
      axios.put('/api/module/', modelData).then(res => {
        if(res.data.code === '1'){
          msg("success","添加成功");
        }else{
          msg("error", res.data.message);
        }
      modelForm.dialogFormVisible = false;
      onMounted();
    })
  }
}

// 清空模态框
const reset = () => {
  modelData.moduleName = null;
  modelData.moduleStyle = null;
  modelData.url = null;
  modelData.id = null;
  modelData.parentId = null;
  modelData.createDate = null;
  modelData.parentOptValue = null;
  modelData.grade = null;
  modelData.optValue = null;
  modelData.order = null;
  modelData.updateDate = null;
}

// 关闭模态框
const closeModel = () => {
  modelForm.dialogFormVisible = false;
}

// 初始化数据
onMounted(() => {
  fetchData(queryForm);
});
</script>

<style scoped>
</style>